<template>
  <div class="operation-bar">
    <template v-for="item of options.actions" :key="item.text">
      <div
        class="operation"
        v-if="showAction(item)"
        @click="item?.onClick ? item.onClick() : () => {}"
      >
        <ArkIconFont v-if="item.icon" :icon="item.icon" :class="item.iconClass"/>
        {{ item.text }}
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import {onBeforeMount, PropType,} from "vue";
import _ from "lodash";
import {ArkActionButton} from "../../common-type/ark-action-button";
import ArkActionBarOptionsDefault, {ArkActionBarOptions} from "./ArkActionBarOptions";
import ArkIconFont from "../../basic/ark-iconfont/ArkIconFont.vue";

/** 接口（组件的接口）。包括：defineOptions、defineModel、defineProps、defineEmits、defineExpose、defineSlots */
const options = defineModel("options", {
  type: Object as PropType<ArkActionBarOptions>,
  default: () => ArkActionBarOptionsDefault
});

/** 本地状态 (本地的响应式 property)。包括：ref、computed */

/** 生命周期钩子（按照它们被调用的顺序）。包括：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted */
onBeforeMount(() => {
  init();
});

/** 事件（通过响应式事件触发的回调）。包括：watch */

/** 非响应式的 property (不依赖响应系统的实例 property)。包括：常规函数 */
const init = () => {
  _.defaultsDeep(options.value, ArkActionBarOptionsDefault);
};

const showAction = (actionObj: ArkActionButton<any>) => {
  if (_.isNil(actionObj)) {
    return true;
  }

  if (_.isNil(actionObj.show)) {
    return true;
  }

  return actionObj.show;
};

/** 其它 */
</script>

<style scoped lang="scss">
.operation-bar {
  padding: 4px 8px;
  border: 1px solid #dcdfe6;
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(116, 116, 128, 0.08);
}

.operation {
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 4px 8px;
  column-gap: 4px;

  &:hover {
    background-color: #e1f0ff !important;
  }
}
</style>
